<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-select
          style="width: 100%"
          v-model="checkedData"
          :disabled="readonly"
          :placeholder="$t('请选择')"
          clearable
          @change="changeData"
        >
          <el-option
            v-for="item in optionsList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-button
          style="margin-left: 10px"
          type="text"
          :disabled="!checkedData"
          @click="downLoad"
          >{{ $t('下载文本') }}</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>
<script>
import api from '@/services/defineContract'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'dataSource',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [Object, String],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      checkedData: null,
      selectData: {},
      loading: false,
      optionsList: [],
      readonly: false,
      showFlag: false,
    }
  },
  created() {
    if (this.value) {
      this.setData()
    }
    this.getOpts()
    this.readonly = Boolean(this.$route.query.readonly) || this.disabled
  },
  methods: {
    getOpts() {
      api.queryTenantTextTemplates({}).then((res) => {
        if (res.data.resultCode == '0000') {
          this.optionsList = (res.data.data || []).map((it) => {
            return {
              ...it,
              value: it.tenantTemplateId,
              label: (it.templateTextCode || '') + (it.templateTextName || ''),
            }
          })
        }
      })
    },
    setData() {
      this.selectData = JSON.parse(this.value).selectData
      this.checkedData = JSON.parse(this.value).checkedData
    },
    changeData(val) {
      if(!val) {
        this.$emit('input', '');
        return
      }
      this.selectData =
        (this.optionsList || []).find((it) => it.value == val) || {}
      this.getData()
      this.$emit('changeRule')
    },
    getData() {
      const params = {
        value: this.selectData.label,
        checkedData: this.checkedData,
        selectData: this.selectData,
      }
      this.$emit('input', JSON.stringify(params))
    },
    downLoadFile(url, fileName) {},
    downLoad() {
      console.log(this.selectData, 'this.selectData')
      api
        .previewContractPdf({ tenantTemplateId: this.checkedData })
        .then((res) => {
          if (res.data.resultCode === '0000') {
            const url = res.data.filePath
            const fileName = this.selectData.templateTextName
            if (url) {
              var xml = new XMLHttpRequest()
              xml.open('GET', url, true)
              xml.responseType = 'blob'
              xml.onload = function () {
                var url = window.URL.createObjectURL(xml.response)
                var a = document.createElement('a')
                a.href = url
                ;(a.download = fileName), a.click()
              }
              xml.send()
            }
          }
        })
    },
  },
}
</script>
